<template>
	<view>
		<view class="tabs">
			<u-tabs
				:list="list1"
				lineColor="#4BC264"
				@change="change"
				:current="current"
				:activeStyle="{
					color: '#1C274C',
					fontWeight: 'bold',
					transform: 'scale(0.9)'
				}"
				:inactiveStyle="{
					color: '#A4A9B7',
					transform: 'scale(0.8)'
				}"
				itemStyle="padding-left: 50rpx; padding-right: 50rpx; height: 42px;"
			></u-tabs>
		</view>
		
		<view class="z-flex-x-s-b">
			<view class="time" @click="orderTypeShow = true">
				{{orderTypeText || '订单类型'}}
				<image src="../../static/bot-img.png" mode=""></image>
			</view>
			<u-picker @confirm="confirm" closeOnClickOverlay @close="orderTypeShow = false" @cancel="orderTypeShow = false" confirmColor="#4BC264" :show="orderTypeShow" :columns="columns"></u-picker>
			
			<view class="time" @click="show = true">
				{{starttimeText || '开始日期'}}
				<image src="../../static/bot-img.png" mode=""></image>
				<text>至</text>
				{{endtimeText || '结束日期'}}
				<image src="../../static/bot-img.png" mode=""></image>
			</view>
		</view>
		<u-calendar
			color="#4BC264"
			:minDate="minDate"
			:maxDate="maxDate"
			class="calendar"
			:show="show"
			mode="range"
			@close="onClose"
			:defaultDate="defaultDateMultiple"
			@confirm="onConfirm"
			monthNum="20"
		/>
		
		
		<view class="search-box">
			<view class="search">
				<image src="../../static/search.png" mode=""></image>
				<input @input="debounceClick" type="number" v-model="mobile" placeholder="请输入手机号" />
			</view>
		</view>
		
		<!-- <view class="box"> -->
			<scroll-view class="box" scroll-y="true" @scrolltolower="lower()">
				<view class="each" v-for="i in orderList" @click="$authTo('/pages/order-detail/order-detail?id='+i.id)">
					<view class="title z-flex-x-s-b">
						<view class="name">{{i.table.name}}:{{i.table.number}}</view>
						<view class="state-box">
							<text v-if="i.type == 1">免押金开台</text>
							<text v-if="i.type == 2">预付款开台</text>
							<text v-if="i.type == 3">定时开台</text>
							<text v-if="i.type == 4">美团团购核销</text>
							<text v-if="i.type == 5">抖音团购核销</text>
							<text v-if="i.type == 6">月卡开台</text>
							
						    <text class="state1" v-if="i.status == 1">进行中</text>
							<text class="" style="color: #A4A9B7;" v-if="i.status == 2">已完成</text>
							<text class="" style="color: #FF1818;" v-if="i.status == 3">已退款</text>
						</view>
					</view>
					<view class="z-flex-x-s-b z-padding-tb-24 minor">
						<view class="">客户昵称：{{i.user.nickname}}</view>
						<view class="">手机号：{{i.user.mobile}}</view>
					</view>
					<view class="z-flex-x-s-b minor">
						<view class="">开台时间：{{i.starttime | date('yyyy/mm/dd hh:MM')}}</view>
						<view class=""></view>
					</view>
					<view class="z-margin-t-32"></view>
					<u-line length="622rpx" style="margin: auto;"></u-line>
					<view class="z-flex-x-s-b base">
						<view class=""> {{formatTime(i.overtime-i.starttime)}} <text>￥{{i.allprice}}</text> </view>
						<view class="btn btn1" v-if="i.status == 1">结束订单</view>
						<view class="btn btn2" v-if="i.status == 3">操作退款</view>
					</view>
				</view>
				<u-loadmore :status="status" />
				
				<u-empty class="z-padding-tb-32" icon='https://cdn.uviewui.com/uview/empty/list.png'
					v-if="orderList.length == 0"></u-empty>
				<view style="height: 20rpx;width: 1rpx;"></view>
			</scroll-view>
			
		<!-- </view> -->
	</view>
</template>

<script>
	const d = new Date()
		const year = d.getFullYear()
		let month = d.getMonth() + 1
		month = month < 10 ? `0${month}` : month
		const date = d.getDate()
	export default {
		data() {
			return {
				list1: [
					{
						name: '全部'
					},
					{
						name: '消费中'
					},
					{
						name: '已结算'
					},
					{
						name: '申请退款'
					}
				],
				current: 0,
				orderTypeShow:false,
				columns:[['免押金开台','预付款开台','定时开台','美团团购核销','抖音团购核销','月卡开台']],
				
				orderList:[],
				page:1,
				status: 'loadmore',
				flag: false,
				
				orderTypeText:'',
				//筛选条件
				mobile:'',
				orderType:'',
				starttime:'',
				endtime:'',
				//显示开始结束日期
				starttimeText:'',
				endtimeText:'',
				
				debounceTimer: null,
				minDate: new Date(2023, 0, 1).getTime(),
				maxDate: new Date().getTime() + 86400000,
				show: false,
				defaultDateMultiple: [`${year}-${month}-${date}`],
			}
		},
		onLoad() {
			this.getOrderList()
		},
		methods: {
			onConfirm(event) {
				this.starttimeText = event[0]
				this.endtimeText = event[event.length - 1];
				const date = new Date(event[0]);
				this.starttime = Math.floor(date.getTime() / 1000);
				const date2 = new Date(event[event.length - 1]);
				this.endtime = Math.floor(date2.getTime() / 1000);
				this.show = false;
				this.page = 1
				this.orderList = []
				this.getOrderList()
			},
			onClose() {
				this.show = false;
			},
			debounceClick(value) {
				// 清除之前的计时器
				if (this.debounceTimer) clearTimeout(this.debounceTimer);
				// 设置一个新的计时器，并在指定时间后执行回调函数
				this.debounceTimer = setTimeout(() => {
					// console.log(value)
					this.mobile = value.detail.value
					this.page = 1
					this.orderList = []
					this.getOrderList()
				}, 1000);
			},
			confirm(e){
				console.log(e,'???????')
				this.orderTypeText = e.value[0]
				this.orderType = e.indexs[0]+1
				this.orderTypeShow = false
				
				this.page = 1
				this.orderList = []
				this.getOrderList()
			},
			lower(){
				//避免多次触发
				if (this.status == 'loading' || this.status == 'nomore') {
					return;
				}
				this.status = 'loading';
				this.getList()
			},
			getOrderList(){
				this.flag = false
				this.status = 'loading';
				
				this.$api.post('/orderList', {
					page: this.page,
					status:this.current,
					type:this.orderType,
					starttime:this.starttime,
					endtime:this.endtime,
					search:this.mobile
				}).then((res) => {
					if (res.code == 1) {
						if (res.data.lengt < 20) {
							this.status = 'nomore';
						} else {
							this.orderList = this.orderList.concat(res.data);
							this.page++
							this.status = 'loadmore';
						}
						this.flag = true
						uni.stopPullDownRefresh();
					}
				}).catch((res) => {});
			},
			change(e) {
				this.current = e.index;
				this.page = 1
				this.orderList = []
				this.getOrderList()
			},
			formatTime(seconds) {
			    // 计算小时、分钟和秒
			    const hours = Math.floor(seconds / 3600);
			    const minutes = Math.floor((seconds % 3600) / 60);
			    const remainingSeconds = seconds % 60;
			
			    // 格式化输出
			    const formattedHours = String(hours).padStart(2, '0');
			    const formattedMinutes = String(minutes).padStart(2, '0');
			    const formattedSeconds = String(remainingSeconds).padStart(2, '0');
			
			    return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F8FA;
	}
	.tabs {
		background-color: #FFF;
		position: relative;
		width: 750rpx;
	}
	
	.time {
		font-weight: 500;
		font-size: 24rpx;
		color: #A4A9B7;
		padding: 32rpx 32rpx 0 32rpx;
		image {
			width: 12rpx;
			height: 12rpx;
			vertical-align: middle;
			margin-left: 16rpx;
		}
		text {
			font-weight: 500;
			font-size: 24rpx;
			color: #1C274C;
			padding: 0 24rpx;
		}
	}
	
	.search-box {
		position: relative;
		width: 750rpx;
		margin-top: 27rpx;
		.search {
			width: 622rpx;
			padding: 0 32rpx;
			height: 72rpx;
			background: #ffffff;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: auto;
			display: flex;
			align-items: center;
			image {
				width: 24rpx;
				height: 24rpx;
			}
			input {
				font-size: 26rpx;
				padding-left: 16rpx;
			}
		}
	}
	
	.box{
		margin-top: 24rpx;
		height: calc(100vh - 290rpx);
		.each {
			padding: 32rpx;
			width: 622rpx;
			margin: auto;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin-bottom: 24rpx;
			
			.title {
				font-weight: bold;
				font-size: 26rpx;
				color: #1C274C;
				.state-box {
					font-weight: 500;
					font-size: 22rpx;
					text {
						color: #FF7B18;
						padding-right: 8rpx;
					}
					.state1 {
						color: #4BC264;
					}
				}
			}
			.minor {
				font-weight: 500;
				font-size: 24rpx;
				color: #6B738B;
			}
			.base {
				font-weight: bold;
				font-size: 28rpx;
				color: #1C274C;
				margin-top: 24rpx;
				text {
					color: #FF7B18;
				}
				.btn {
					width: 144rpx;
					height: 56rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					text-align: center;
					font-weight: 500;
					font-size: 26rpx;
					line-height: 56rpx;
				}
				.btn1 {
					color: #4BC264;
					border: 1rpx solid #4BC264;
				}
				.btn2 {
					color: #FF1818;
					border: 1rpx solid #FF1818;
				}
			}
		}
	}
</style>
